import type {
  TableColumnData,
  TableData,
  TableInstance,
  TableRowSelection,
  TableSortable
} from '@arco-design/web-vue'
import dayjs from 'dayjs'
import Decimal from 'decimal.js'
import { isBoolean, isObject, isString, merge, omit } from 'lodash-es'

import CopyField from '../components/CopyField.vue'
import EditField, { type EditFieldProps } from '../components/EditField.vue'
export interface EditFormat extends EditFieldProps {
  type: 'edit'
}

export type BuildTabColumnsData = TableColumnData & {
  disableEllipsis?: boolean
  disableTooltip?: boolean
  minWidth?: number
  maxWidth?: number
  enWidth?: number
  format?:
    | 'date'
    | 'date-time'
    | 'date-hour-minute'
    | 'time'
    | 'empty'
    | 'copy'
    | 'dollar'
    | EditFormat
  clickFn?: (record: TableData) => void
}
export function buildColumns(
  columns: BuildTabColumnsData[]
): TableColumnData[] {
  return columns.map((item) => {
    if (!item?.disableTooltip) {
      item.tooltip = true
    }
    if (!item?.disableEllipsis) {
      item.ellipsis = true
    }
    if (item?.minWidth) {
      item.cellStyle = {
        minWidth: `${item.minWidth}px`,
        ...(item.cellStyle || {})
      }
    }
    if (item?.maxWidth) {
      item.cellStyle = {
        maxWidth: `${item.maxWidth}px`,
        ...(item.cellStyle || {})
      }
    }
    // item.width = lang === 'zh-CN' ? item.width : item.enWidth
    if ((!item.slotName && !item?.render) || item?.format === 'empty') {
      item.render = ({ record }) => {
        const data = record[item.dataIndex!]
        if (isBoolean(data)) return data
        if (data === 0) return data
        if (data) return data
        return '-'
      }
    }
    if (isString(item?.format)) {
      if ((item?.format || '').startsWith('date') || item.format === 'time') {
        item.render = ({ record }) => {
          const data = record[item.dataIndex!]
          if (!data || Number(data) === 0) return '-'
          let template = 'YYYY-MM-DD HH:mm:ss'
          if (item.format === 'date') {
            template = 'YYYY-MM-DD'
          } else if (item.format === 'date-hour-minute') {
            template = 'YYYY-MM-DD HH:mm'
          } else if (item.format === 'time') {
            template = 'HH:mm:ss'
          }
          return dayjs(data * 1000).format(template)
        }
      }

      // 美元
      if (item?.format === 'dollar') {
        item.align = item?.align == undefined ? 'right' : item.align
        item.render = ({ record }) => {
          const data = record[item.dataIndex!]
          if (!data || Number(data) === 0) return '-'
          const value = Decimal.div(data, 10000).toString()
          return h('span', { class: 'text-primary' }, `${value}`)
        }
      }

      if (item?.format === 'copy') {
        item.render = ({ record }) => {
          return h(
            CopyField,
            {
              hoverTable: true,
              isLink: false
            },
            {
              default: () =>
                h(
                  'span',
                  {
                    class: item.clickFn
                      ? 'table-copy-text  cursor-pointer'
                      : '',
                    onClick: () => {
                      if (item.clickFn) {
                        item.clickFn(record)
                      }
                    }
                  },
                  record[item.dataIndex!] || '-'
                )
            }
          )
        }
      }
    }

    if (isObject(item?.format) && item.format?.type === 'edit') {
      item.render = ({ record }) => {
        return h(EditField, {
          content: record[item.dataIndex!] || '-',
          ...omit(item.format as {}, 'type')
        })
      }
    }

    return item
  })
}

export const sortableSettings: TableSortable = {
  sortDirections: ['ascend', 'descend'],
  sorter: true
}

export const defaultRowSelection = shallowReactive<TableRowSelection>({
  type: 'checkbox',
  showCheckedAll: true,
  checkStrictly: true,
  onlyCurrent: true
})

export const radioRowSelection = shallowReactive<TableRowSelection>({
  type: 'radio',
  onlyCurrent: true
})

export const commonTableProps: TableInstance['$props'] = {
  rowKey: 'id',
  columnResizable: false,
  pagination: false
}

export const draggableTableProps: TableInstance['$props'] = Object.assign(
  {},
  commonTableProps,
  { draggable: { type: 'handle', width: 40 } }
)

export const mergeTableProps = (props?: TableInstance['$props']) =>
  merge(commonTableProps, props || {})
